<template>
	<view v-if="data.length">
		<!-- 	<view class="device-title">
			在线设备
		</view> -->
		<view class="device">
			<view class="device_item" v-for="(item, index) in data" :key="index" @click="tools.debounce(onDevice(item), 1500)">
				<view class="device_item_head">
					<view class="device_item_head_name">
						{{item.name}}
					</view>
					<view class="device_item_head_more" @click.stop="more(item, index)">
						<rui-icons icon="more" color="var(--color)"></rui-icons>
					</view>
				</view>
				<view class="device_item_body" v-if="item.color">
					<view class="device_item_body_left">
						<image :src="item.color.image" class="device_item_body_left_image" mode=""></image>
					</view>

					<view class="device_item_body_info">
						<view class="device_item_body_info_name">
							{{item.color.name}}
						</view>
						
					</view>
				</view>
			</view>
		</view>



		<rui-button text="添加设备" @click="to"></rui-button>
	</view>

	<view class="device_empty" v-else>
		<view class="device_empty_box" @click="to">
			<view class="device_empty_box_tips">
				暂未找到设备
			</view>
			<view class="device_empty_box_desc">
				请添加设备
			</view>
		</view>
	</view>
	<rui-popup ref="popup">
		<rui-popup-item :data="popup_menu" @change="onPopup"></rui-popup-item>
	</rui-popup>
</template>

<script setup>
	import {
		ref,
		watch
	} from "vue"

	import {
		editProduct,
		delProduct,
		restoreFactory
	} from "@/common/api.js"

	import tools from "@/util/tools";

	let show = ref(false)
	let popup = ref(null)
	let popup_menu = ref([{
			name: "修改",
			type: "edit"
		},
		{
			name: "解绑并删除设备",
			type: "delete"
		}
	])
	let info = {}
	let params = {};

	let props = defineProps({
		data: Array | Object,
		status: Boolean
	})


	let current = ""
	const more = (e, index) => {
		// if (e.is_online == 0) {
		// 	uni.$rui.toast('当前设备不在线')
		// 	return false;
		// }

		info = e;
		current = index;

		// params = {
		// 	id: e.id,
		// 	product_id: e.product_id,
		// 	color: e.color.color,
		// 	name: e.name,
		// 	image: e.color.image,
		// 	deviceId: e.deviceId
		// }
		popup.value.open();
	}

	const emits = defineEmits(['change', 'to'])

	const to = () => {
		emits('to')
	}

	const onPopup = e => {
		popup.value.close();
		// emits('change', {
		// 	type: e.type,
		// 	data: e
		// })
		emits('change')

		if (e.type == 'delete') {


			uni.showModal({
				title: '删除提示',
				content: "您确定要删除此设备",
				success: function(res) {
					if (res.confirm) {
						delProduct({
							id: info.id
						}).then(res => {
							emits('change')
							uni.showToast({
								title: "删除成功",
								icon: "success"
							})
							//删除指纹, 删除喝水次数
							restoreFactory({
								user_product_id: info.id
							})
							
							// emits('change', {
							// 	type: 'delete',
							// 	data: {
							// 		current
							// 	}
							// })
						})
					}
				}
			});
		}
		if (e.type == 'edit') {
			uni.showModal({
				title: '修改提示',
				editable: true,
				placeholderText: "请输入新名称",
				success: function(res) {
					if (res.confirm) {
						let data = editProduct({
							id: info.id,
							name: res.content
						}).then(() => {
							emits('change', {
								type: 'edit',
								data: {
									current,
									name: res.content
								}
							})
							uni.$rui.toast('修改成功')
						})
					}
				}
			});
		}
	}

	const onDevice = (e) => {
		params = {
			id: e.id,
			color: e.color.color,
			product_id: e.product_id,
			name: e.name,
			image: e.color.image,
			mac: e.mac,
			status: e.status,
			// channel: e.channel
		}
		uni.$rui.route(e.path, params)
		popup.value.close();
	}
</script>

<style lang="scss">
	.device-title {
		text-align: center;
		margin: 30rpx 0;
		position: relative;


		&::before {
			content: "";
			display: block;
			position: absolute;
			width: calc(100% - 60rpx);
			height: 1rpx;
			background: #e5e5e5;
			// border-bottom: 1rpx dashed #ddd;
			top: 50%;
			transform: translate(30rpx, -50%);
			z-index: -2;
		}

		&::after {
			content: "";
			display: block;
			width: 200rpx;
			height: 80rpx;
			position: absolute;
			top: 0;
			left: 50%;
			background: #f7f8f9;
			transform: translate(-50%, -50%);
			z-index: -1;
			border-radius: 50rpx;
		}

	}

	.device {
		display: flex;
		flex-wrap: wrap;
		margin: 0 10rpx;


		&_empty {
			margin: 20rpx;
			background: #fff;
			border-radius: 10rpx;
			padding: 30rpx;

			&_box {
				text-align: center;
				margin: 25rpx auto;

				&_tips {
					font-size: 40rpx;
				}

				&_desc {
					color: var(--color);
				}
			}
		}

		.offline {
			filter: grayscale(50%);
			opacity: 0.8;


		}



		&_item {
			background: #fff;
			padding: 30rpx;
			margin: 10rpx;
			border-radius: 20rpx;
			width: calc(50% - 80rpx);



			&_head {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				align-items: center;

				&_name {
					font-size: 32rpx;
					font-weight: bold;
					// color: var(--color);
				}

				&_more {
					height: 50rpx;
					width: 50rpx;
					// background: #eee;
					text-align: center;
					line-height: 50rpx;

				}
			}

			&_body {
				// display: flex;
				// justify-content: space-between;
				// align-items: center;

				&_info {

					&_sync {
						color: var(--gray);
						font-size: 24rpx;
					}

					&_status {
						// display: flex;
						// justify-content: space-between;
						// align-items: center;
						margin-top: 10rpx;
						font-size: 28rpx;
						display: flex;

						&_item {
							display: flex;
							align-items: center;

							&_circle {
								width: 15rpx;
								height: 15rpx;
								background: var(--color);
								border-radius: 50%;
								margin-right: 10rpx;
							}

							&_loading {
								// animation: rotate infinite 2s linear;
								// margin-right: 10rpx;
							}

							// @keyframes rotate {
							// 	from {
							// 		transform: rotate(0deg);
							// 	}

							// 	to {
							// 		transform: rotate(360deg);
							// 	}
							// }
						}

					}

					&_name {
						// font-weight: bold;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				&_left {
					width: 135rpx;
					height: 135rpx;
					margin: 20rpx auto;

					&_image {
						width: inherit;
						height: inherit;
						border-radius: 30rpx;
					}
				}

			}

		}

	}
</style>